<template>
  <div class="login">
    <div class="login-mask">
      <h3 class="title">饿不饿外卖管理系统</h3>
      <p>
        <el-input
          v-model="account"
          prefix-icon="el-icon-user-solid"
          placeholder="账号"
        ></el-input>
      </p>
      <p>
        <el-input
          v-model="password"
          prefix-icon="el-icon-lock"
          show-password
          placeholder="密码"
        ></el-input>
      </p>
      <p class="title">
        <el-button class="loginbtn" @click="login">登录</el-button>
      </p>
      <div v-show="isShowSlide" @mouseleave="hideSlide" class="slideverify">
        <SlideVerify ref="slideblock" @success="success"></SlideVerify>
      </div>
    </div>
  </div>
</template>
<script>
import { $_login } from "../apis/user";
import SlideVerify from "@/components/SlideVerify";
export default {
  name: "Redister",
  components: {
    SlideVerify, //注册组件
  },
  data() {
    return {
      account: "",
      password: "",
      isShowSlide: false,
    };
  },
  methods: {
    login() {
      this.isShowSlide = true;
    },
    hideSlide() {
      setTimeout(() => {
        this.isShowSlide = false;
      }, 500);
    },
    success() {
      $_login({
        account: this.account,
        password: this.password,
      }).then((res) => {
        if (res.data.code == 0) {
          localStorage.id = res.data.id;
          localStorage.token = res.data.token;
          localStorage.role = res.data.role;
          this.$message({
            message: res.data.msg,
            type: "success",
          });
          this.$router.push("./Index/Home");
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/styles/them.less");

html,
body {
  height: 100% !important;
  width: 100% !important;
}
.login {
  width: 100%;
  height: 100%;
  background-color: @base-color;
  display: flex;
  align-items: center;
  justify-content: center;
  .slideverify {
    width: 100%;
    height: 100%;
    background-color: #00000056;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.login-mask {
  width: 400px;
  height: 300px;
  background-color: @base-color2;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: space-around;
  padding: 15px;
}
.title {
  text-align: center;
  color: #fff;
}
.loginbtn {
  background-color: @base-color2;
  width: 100%;
  color: #fff;
}
</style>
